<template>
  <div class="user-info-temp">
    <div class="title">
      <span>参赛实名信息</span>
      <van-button icon="plus" type="info" size="small" @click="addUsers">添加实名信息</van-button>
    </div>
    <div v-if="userRole == 1">
      <div class="titles">参赛者(请选择):</div>
      <div class="titles-alert" v-if="entryList.length == 0">您还未添加参赛者</div>
      <van-radio-group v-model="userInfo.entry_id" @change="entryChange">
        <div class="entry-group" v-for="item in entryList" :key="item.id">
          <div class="entry-radio" v-if="!item.signup_id">
            <van-radio :name="item.id"></van-radio>
          </div>
          <div class="entry-ids">
            <span>{{ item.id_number | ids }}</span>
            <div v-if="item.signup_id">
              <van-tag type="warning" v-if="item.is_examine == 0">未审核</van-tag>
              <van-tag type="primary" v-if="item.is_examine == 1 && item.signup_status == 0">已报名</van-tag>
              <van-tag type="primary" v-if="item.is_examine == 1 && item.signup_status == 1">已提交</van-tag>
            </div>
            <div v-else><van-tag type="warning">未报名</van-tag></div>
          </div>
          <div class="entry-name">参赛人姓名:{{ item.name }}</div>
          <div class="bottom-button" v-if="item.signup_id && item.is_examine == 1">
            <van-button type="info" size="small" @click.stop="shureMethod(item)">{{ item.signup_status == 0 ? '上传作品' : '查看作品'
              }}</van-button>
          </div>
        </div>
      </van-radio-group>
      <div v-if="guardianShow">
        <div class="titles">监护人(请选择):</div>
        <div class="titless">(因参赛者未满18周岁,需添加监护人信息)</div>
        <div class="titles-alert" v-if="guardianList.length == 0">您还未添加监护人</div>
        <van-radio-group v-model="userInfo.guardian_id">
          <div class="entry-group" v-for="item in guardianList" :key="item.id">
            <div class="entry-radio">
              <van-radio :name="item.id"></van-radio>
            </div>
            <div class="entry-ids">
              <span>{{ item.id_number | ids }}</span>
            </div>
            <div class="entry-name">监护人姓名:{{ item.name }}</div>
          </div>
        </van-radio-group>
      </div>
    </div>
    <div v-if="userRole == 2">
      <div class="titles">评审人(请选择):</div>
      <div class="titles-alert" v-if="guardianList.length == 0">您还未添加评审人</div>
      <van-radio-group v-model="userInfo.entry_id">
        <div class="entry-group" v-for="item in guardianList" :key="item.id">
          <div class="entry-radio">
            <van-radio :name="item.id"></van-radio>
          </div>
          <div class="entry-ids">
            <span>{{ item.id_number | ids }}</span>
          </div>
          <div class="entry-name">评审人姓名:{{ item.name }}</div>
        </div>
      </van-radio-group>
    </div>
    <div style="margin: 16px;" v-if="userInfo.entry_id">
      <van-button round block type="info" @click="onSubmit">报名提交</van-button>
    </div>
  </div>
</template>

<script>
import { Toast, Form, Field, Button, RadioGroup, Radio, Tag } from 'vant';
import { find, isString } from 'lodash';
import { getUserRole } from "@/utils/utils";
export default {
  props: {
    callback: {
      type: Function,
      default: function () { return ''; }
    },
    initShow: {
      type: Boolean,
      default: false
    },
    activeId: {
      type: String,
      default: ''
    }
  },
  components: {
    [Field.name]: Field, [Form.name]: Form, [Button.name]: Button,
    [RadioGroup.name]: RadioGroup, [Radio.name]: Radio, [Tag.name]: Tag
  },
  data: function () {
    return {
      userRole: getUserRole(),
      entryList: [],
      guardianList: [],
      guardianShow: false,
      userInfo: {
        entry_id: '',
        guardian_id: ''
      }
    };
  },
  watch: {
    initShow: function (val) {
      if (val) {
        this.guardianShow = false;
        this.userInfo = {
          entry_id: '',
          guardian_id: ''
        };
        this.initAjaxMethod(this.userRole == 1 ? 1 : 3);
      }
    }
  },
  filters: {
    ids: function (val) {
      if (!val || !isString(val)) return '';
      return val.substring(0, 4) + '····' + val.substring(val.length - 4);
    }
  },
  mounted() {
    if (this.initShow) {
      this.guardianShow = false;
      this.userInfo = {
        entry_id: '',
        guardian_id: ''
      };
      this.initAjaxMethod(this.userRole == 1 ? 1 : 3);
    }
  },
  methods: {
    shureMethod(row) {
      this.$router.push({ path: '/matchSubmit', query: { activeId: this.activeId, signupId: row.signup_id, type: row.signup_status == 0 ? 1 : 2 } });
    },
    addUsers() {
      this.$router.push({ path: '/recognitionList' });
    },
    entryChange() {
      let item = find(this.entryList, o => o.id == this.userInfo.entry_id);
      if (item && this.getAge(item.birthday) < 18) {
        this.guardianShow = true;
        this.initAjaxMethod(2);
      }
    },
    initAjaxMethod(role_type) {
      this.$http
        .post(this.$API.RECOGNITION_LIST, { role_type, active_id: this.activeId })
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data) ? res.data : [];
            if (role_type == 1) {
              this.entryList = list;
            } else {
              this.guardianList = list;
            }

          }
        });
    },
    onSubmit() {
      if (!this.userInfo.entry_id) {
        return this.$notify({ type: 'warning', message: '请选择参赛者' });
      }
      if (this.guardianShow && !this.userInfo.guardian_id) {
        return this.$notify({ type: 'warning', message: '请选择监护人' });
      }
      this.callback(this.userInfo);
    },
    getAge(val) {
      let currentYear = new Date().getFullYear(); //当前的年份
      let calculationYear = new Date(val).getFullYear(); //计算的年份
      const wholeTime = currentYear + val.substring(4); //周岁时间
      const calculationAge = currentYear - calculationYear; //按照年份计算的年龄
      //判断是否过了生日
      if (new Date().getTime() > new Date(wholeTime).getTime()) {
        return calculationAge;
      } else {
        return calculationAge - 1;
      }
    }
  },
};
</script>

<style lang="less">
.user-info-temp {
  padding: 0.2rem;

  .entry-group {
    padding: 0.2rem 0.2rem 0.2rem 0.7rem;
    border: 1px solid #eee;
    background: #fafafa;
    position: relative;
    border-radius: 6px;
    margin-bottom: 0.1rem;

    .entry-radio {
      position: absolute;
      top: 50%;
      left: 0.1rem;
      transform: translateY(-50%);
    }

    .entry-ids {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.28rem;
      color: #333;

      .van-tag {
        font-size: 0.24rem;
        padding: 0.1rem 0.3rem;
        border-radius: 4px;
        line-height: 0.24rem;
      }
    }

    .entry-name {
      padding-top: 0.12rem;
      font-size: 0.28rem;
      color: #333;
    }

    .bottom-button {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 0.2rem;
    }
  }

  .title {
    padding: 0.5rem 0.3rem 0.3rem 0.3rem;
    font-size: 0.3rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .van-radio {
    padding: 0.2rem 0.1rem;
    background: #fafafa;
  }

  .titles {
    padding: 0.3rem;
    font-size: 0.28rem;
    color: #333;
    font-weight: bold;
  }

  .titless {
    padding: 0 0.3rem 0.3rem 0.3rem;
    font-size: 0.26rem;
    color: red;
  }

  .titles-alert {
    padding: 0.3rem;
    font-size: 0.26rem;
    color: #888;
    text-align: center;
  }

  /* 插件部分样式重置 */
  .van-cell {
    padding: 0.3rem 0.3rem;
    font-size: 0.3rem;
    line-height: 0.48rem;
  }

  .van-cell__title {
    font-size: 0.3rem;
  }

  .van-radio__label {
    font-size: 0.3rem;
  }
}
</style>